<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');

    // 获取webgl上下文
    let gl = ctx.getContext('webgl')

    // 着色器
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        // 必须要存在main函数
        void main(){
            // 要绘制的点的坐标  x y z w（齐次坐标） 最终会变成这样 x/w y/w z/w
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            // 点的大小  数据类型 必须是 浮点型数据类型
            gl_PointSize = 30.0;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            // 参数 rgba
            gl_FragColor = vec4(1.0, 0.0, 0.1, 1.0);
        }
    `;

    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)


    // 执行绘制
    // 要绘制的图形是什么，从那个开始， 使用几个顶点
    gl.drawArrays(gl.POINTS, 0, 1);

    // gl.drawArrays(gl.LINES, 0 ,1); //线 最少需要两个点
    // gl.drawArrays(gl.TRIANGLES, 0, 1); //三角 3个点

    // 三个点
    // 0.0 0.0 0.0 绘制成一个点
    // 0.2 0.0 0.0
    // 0.4 0.0 0.0 绘制成一个线段

    // gl.drawArrays(gl.POINTS, 0, 1);
    // gl.drawArrays(gl.LINES, 1, 2);
</script>
</html>
